<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>demo01</title>
    <style type="text/css">
    .grey{ width: 100px; height: 100px; border: 1px solid #DDD; }
    </style>
</head>
<body>
    <div class="grey grey1">11</div>
    <div class="grey grey2">22</div>
    <div class="grey grey3">33</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script type="text/javascript">
gsap.from(".grey1",{
    duration: 3,
    x: 300,
    onStart: function() {
        console.log('onStart', 11);
    },
    onComplete: function() {
        console.log('onComplete', 11);
    },
});
gsap.to(".grey2",{
    duration: 3,
    x: 300
});
gsap.fromTo('.grey3', {
    x: 300
}, {
    x: 20,
    y: 50,
    duration: 3
})
</script>
</html>
